<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <video src="./1.mp4" controls></video><br>
  <button>播放</button>
  <button>暂停</button>
  <button>快速播放</button>
  <button>快进</button>
  <button>快退</button>
  <button>重新加载</button>
  <button>全屏</button>
  <button>中屏</button>
  <button>小屏</button>
  <button>大屏</button>
</body>
<script>
  let video = document.querySelector('video')
  let btn = document.querySelectorAll('button')

  btn[0].onclick = function () {
    // 播放
    video.play()
  }
  btn[1].onclick = function () {
    // 暂停
    video.pause()
  }
  btn[2].onclick = function () {
    // 倍速播放
    video.playbackRate = 10  //10倍速播放
  }
  btn[3].onclick = function () {
    // 快进
    video.currentTime += 10  //快进10秒 
  }
  btn[4].onclick = function () {
    // 快退
    video.currentTime -= 10  //快退10秒 
  }
  btn[5].onclick = function () {
    // 重新加载
    video.load()
  }
  btn[6].onclick = function () {
    // 全屏
    video.webkitRequestFullScreen()
  }
  btn[7].onclick = function () {
    // 中屏
    video.width = 600
    video.height = 600
  }
  btn[8].onclick = function () {
    // 小屏
    video.width = 200
    video.height = 200
  }
  btn[9].onclick = function () {
    // 大屏
    video.width = 1200
    video.height = 1200
  }

</script>

</html>